<template>
	<div :class="['right', { dark }]">
		<div class="menu-list">
			<el-icon class="icon" size="15" @click="openSearchBar"><Search /></el-icon>
			<el-icon class="icon" size="15"><Bell /></el-icon>
			<el-icon class="icon" size="15" @click="toggleFullPage"><FullScreen /></el-icon>
			<el-icon class="icon" size="15" @click="toRefresh"><Refresh /></el-icon>
			<el-icon class="icon" size="15" @click="toggleDarkTheme" v-show="!isDark">
				<Sunny />
			</el-icon>
			<el-icon class="icon" size="15" @click="toggleDarkTheme" v-show="isDark">
				<MoonNight />
			</el-icon>
			<el-icon class="icon" size="15" v-if="isDev" @click="toOpenSetting">
				<Setting />
			</el-icon>
		</div>
		<el-dropdown size="large">
			<div class="user-info">
				<el-avatar class="avatar" :size="30" icon="UserFilled" />
				<span class="name">{{ userInfo.loginName }}</span>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item>个人设置</el-dropdown-item>
					<el-dropdown-item divided @click="toLogout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { ElMessageBox } from "element-plus"
import { useTheme } from "../modules/theme"
import { useUserInfoStore } from "/store/userInfo"
import { useSettingStore } from "/store/setting"
import { useSearchBarStore } from "/store/search-bar"
import { isDev } from "/utils"

defineProps({
	dark: {
		type: Boolean,
		default: false,
	},
})

const { isDark, toggleDarkTheme } = useTheme()

const userInfoStore = useUserInfoStore()
const userInfo = computed(() => userInfoStore.userInfo)

const searchBarStore = useSearchBarStore()
function openSearchBar() {
	searchBarStore.visible = true
}
let isFullPage = false
function toggleFullPage() {
	isFullPage ? document.exitFullscreen() : document.documentElement.requestFullscreen()
	isFullPage = !isFullPage
}
function toRefresh() {
	window.location.reload()
}
async function toLogout() {
	try {
		await ElMessageBox.confirm("确定退出登录？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		})
		userInfoStore.logout()
	} catch (error) {}
}

const settingStore = useSettingStore()
function toOpenSetting() {
	settingStore.visible = true
}
</script>

<style lang="scss" scoped>
.right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 320px;
	flex: none;
	.menu-list {
		white-space: nowrap;
		.icon {
			cursor: pointer;
			margin-left: 20px;
			color: #fff;
		}
		padding-right: 20px;
	}
	&.dark {
		.menu-list {
			.icon {
				color: var(--el-text-color-primary);
			}
		}
		.user-info {
			color: var(--el-text-color-primary);
		}
	}
	.user-info {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 16px;
		letter-spacing: 1px;
		cursor: pointer;
		padding-right: 20px;
		.avatar {
			margin-right: 10px;
		}
		.name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100px;
		}
		&::before {
			content: "";
			position: absolute;
			right: 0;
			top: -4px;
			bottom: 0;
			margin: auto;
			width: 0;
			height: 0;
			border-bottom: 9px solid currentColor;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			transition: var(--transition);
			transform: rotate(60deg);
			transform-origin: center center;
		}
		&:hover {
			&::before {
				transform: rotate(0);
			}
		}
	}
}
</style>
